import Head from '@/components/Head';
import Tkd from '@/ssr/tkd';
// css
import styles from '@/styles/CommonDetail.module.scss';
// 组件
import Breadcrumb from '@/components/Breadcrumb';
import ProductInfo from '@/pages_components/detail/ProductInfo';
import Anchor from '@/pages_components/detail/Anchor';
import Message from '@/pages_components/detail/Message';
import Comment from '@/pages_components/detail/Comment';
import Detail from '@/pages_components/detail/Detail';
import HotProductPart from '@/pages_components/components/HotProductPart';
import _404 from '@/pages/404';

export default function DetailMain({
    children,
    params: {
        id,
        name,
        routes
    },
    data: {
        ssr,
        goodsName,
        poiAddress,
        description,
        destinationName,
        showPicture,
        goodsExtendListAppDTOS,
        priceDesc,
        method,
        note,
        discountCouponListDTO,
        algorithms
    },
    recomend: {
        name: _name,
        target: _target
    }
}) {

    // 未找到产品
    if(!ssr.length){
        return <_404 />
    }

    return (
        <div className={styles['common-detail-page']}>
            {/* 标题/关键字/网页描述 */}
            <Head meta={Tkd['/detail/'](goodsName, destinationName)} />
            {/* 正文 */}
            <div className="max-content">
                {/* 面包屑 */}
                <Breadcrumb params={routes} />
                {/* 产品参数 */}
                <ProductInfo data={{
                    name,
                    goodsName,
                    algorithms,
                    imgs: showPicture,
                    location: poiAddress,
                    description: description,
                    products: goodsExtendListAppDTOS,
                    coupons: discountCouponListDTO
                }} />
                {/* 产品下单 */}
                <div className={styles['product-order']} id="anchor-product-order">
                    { children }
                </div>
                {/* 锚点导航 */}
                <Anchor />
                {/* 详情 */}
                <div className={styles['common-wrap']}>
                    <section className={styles['left']}>
                        {/* 详情 */}
                        <Detail data={ssr} />
                        {/* 须知 */}
                        <Message priceDesc={priceDesc} method={method} note={note} />
                        {/* 评价 */}
                        <Comment goodsId={id} />
                    </section>
                    <aside className={styles['right']}>
                        <HotProductPart product={_name} target={_target} />
                    </aside>
                </div>
            </div>
        </div>
    )
}